<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猜数字</title>
</head>
<body>
    <div>请输入要猜的数字:</div>
    <input type="text">
    <button>提交</button>

    <div class="result"></div>

    <script >
        //1.生成一个1-100的随机整数
        let toGuess = parseInt(100*Math.random());
        console.log(toGuess)

        //2.进行猜数字操作
        let button = document.querySelector('button');
        let input = document.querySelector('input');
        let resultDiv = document.querySelector('.result');
        button.onclick = function (){
            //3.取出输入框中的内容
            if(input.value == ''){
                //用户啥也没输入,直接返回
                return;
            }
            let inputNum = parseInt(input.value);
            //4.比较
            if(inputNum <toGuess){
                resultDiv.innerHTML = '低了';
            }else if(inputNum > toGuess){
                resultDiv.innerHTML = '高了';
            }else{
                resultDiv.innerHTML = '猜对了';
            }
        }


    </script>
</body>
</html>